<template>
    <div class="index-slove">
        <Titles :titleInfo="titleInfo"></Titles>
        <div class="slove-video">
            <div class="slove-cont" v-for="(item,index) in sloveList" :key="index">
                <a href="javascript:;">
                    <div class="cover">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="slove-right">
                        <h3>{{ item.title }}</h3>
                        <div class="slove-list">
                            <div class="name">{{ item.release_name }}</div>
                            <div class="time">{{ item.publish_time }}</div>
                            <div class="cost">{{ item.price / 100 }}仟仟币</div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import Titles from '@/components/title'
export default {
    props: ['sloveList'],
    components: {
        Titles
    },
    data() {
        return {
            titleInfo: {
                titles: '最新解盘',
                sign: 'linear-gradient(90deg,rgba(255,139,139,0) 0%,rgba(164,98,255,0.7) 38%,rgba(123,0,255,1) 100%)',
                week: '',
                more: {
                    moreTit: '',
                    show: false
                }
            },
        }
    },
    mounted() {
        this.sloveList.map(item => {
            let time = new Date().getTime();
            let differ = (time / 1000) - item.publish_time;
            let stat_time = item.publish_time * 1000;

            if (differ < 60) {
                //1分钟内
                item.publish_time = '刚刚';
            } else if (differ > 60 && differ < 3600) {
                //1小时内
                item.publish_time = moment().diff(stat_time, 'minutes') + '分钟前';
            } else if (differ > 3600 && differ < 86400) {
                //1天内
                item.publish_time = moment().diff(stat_time, 'hours') + '小时前';
            } else if (differ > 86400 && differ < 259200) {
                //3天内
                item.publish_time = moment().diff(stat_time, 'days') + '天前';
            } else if (differ > 259200) {
                //更早之前
                item.publish_time = moment(stat_time).format('MM-DD HH:mm');
            }
            if(item.price = 0) {
                item.price = '免费'
            }
        })
    }
}
</script>

<style>
.index-slove .slove-video .slove-cont {
    padding-top: 0.3rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(240,242,245,1);
}
.index-slove .slove-video .slove-cont a {
    display: flex;
}
.index-slove .slove-video .slove-cont a .cover {
    width: 2.4rem;
    height: 1.5rem;
}
.index-slove .slove-video .slove-cont a .cover img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.index-slove .slove-video .slove-cont a .slove-right {
    flex: 1;
    margin-left: 0.18rem;
}
.index-slove .slove-video .slove-cont a .slove-right h3 {
    font-size: 0.3rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 0.42rem;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 0.84rem;
}
.index-slove .slove-video .slove-cont a .slove-right .slove-list {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
}
.index-slove .slove-video .slove-cont a .slove-right .slove-list .name,.index-slove .slove-video .slove-cont a .slove-right .slove-list .time {
    font-size: 0.24rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(120,120,120,1);
    line-height: 0.14rem;
}
.index-slove .slove-video .slove-cont a .slove-right .slove-list .cost {
    font-size: 0.28rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,60,84,1);
    line-height: 0.2rem;
}
</style>
